<template>
  <div class="playbar">
    <progressline
      class="progressline"
      :progressWidth="(currentTime / totalTime) * 100 + '%'"
      @setProgressLine="setProgressAudio"
    ></progressline>
    <div class="w1200">
      <el-row class="playbar-inside">
        <el-col :span="7" class="bar-i">
          <div class="bar-img">
            <router-link :to="{ name: 'Song', query: { id: curList.id } }">
              <div class="img-left">
                <audio
                  ref="audio"
                  preload="auto"
                  @canplay="canplaySong"
                  @playing="playSong"
                  @ended="endedSong"
                  @timeupdate="updateSongTime"
                  :src="curList.url"
                ></audio>
                <el-image
                  :src="curList.album.picUrl"
                  style="width: 50px; height: 50px"
                ></el-image>
                <div class="img-name">
                  <p>{{ curList.name | handleFont }}</p>
                  <p class="img-artist">{{ curList.singer[0].name }}</p>
                </div>
              </div>
            </router-link>
            <div class="img-right">
              <div class="time">
                <span
                  >{{ $util.handleSongTime(currentTime * 1000) }} /
                  {{ curList.duration }}</span
                >
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="9" class="bar-c">
          <div class="bar-control">
            <div class="control">
              <i
                class="el-icon-arrow-left"
                @click.stop="audioHandler('prev')"
              ></i>
            </div>
            <div class="control center">
              <i
                :class="[
                  isPlayed ? 'el-icon-video-pause' : 'el-icon-caret-right',
                ]"
                @click.stop="audioHandler('play')"
              ></i>
            </div>

            <div class="control">
              <i
                class="el-icon-arrow-right"
                @click.stop="audioHandler('next')"
              ></i>
            </div>
          </div>
        </el-col>
        <el-col :span="8" class="bar-l">
          <div class="bar-list">
            <div class="blist-left">
              <i class="el-icon-bell"></i>
              <div class="line">
                <progressline
                  class="progress-ado"
                  types="adiouProgress"
                  @setVolume="setVolume"
                ></progressline>
              </div>
            </div>
            <div class="blist-right">
              <div class="icon"><i class="el-icon-refresh"></i></div>
              <div class="icon song-ci" :class="isSongCi?'song-ci-show':''"><span @click="isSongCi=!isSongCi">词</span>
              <lyrics class="ci" v-if="isSongCi" :songId="curList.id" :currentTime="currentTime"></lyrics>
              </div>
              <div class="icon songplay"><i @click="isPlaysongList=!isPlaysongList" class="el-icon-tickets" :class="isPlaysongList?'song-ci-show':''"></i>
              <song-list v-if="isPlaysongList" class="song-li" :songList="playList"></song-list>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapGetters } from "vuex";
import Progressline from "./Line.vue";
import Lyrics from './Lyrics.vue';
import SongList from './Song-list.vue'
export default {
  components: {
    Progressline,
    Lyrics,
    SongList
  },

  data() {
    return {
      isplayIcon: false,
      isMuted: false, //是否静音
      initAudioReady: false, //音频是否准备完毕
      currentTime: 0, //当前音频时长
      totalTime: 0, //音频总时长
      isSongCi:false,//是否显示歌词
      isPlaysongList:false,
    };
  },
  created() {
    // console.log(this.playList);
    this.setPlayList(this.playList);
  },
  computed: {
    ...mapGetters(["curSongInfo", "playList", "isPlayed", "playIndex"]),
    curList() {
      return (
        this.curSongInfo || {
          url: null,
          name: "",
          singer: [{ name: "" }],
          album: { picUrl: null },
        }
      );
    },
  },
  watch: {
    curList(newSong, oldSong) {
      if (!newSong || (oldSong && newSong.id === oldSong.id)) {
        return;
      }
      // 当前播放歌曲变化的时候  重置状态及当前播放的时长
      this.initAudioReady = false;
      this.currentTime = 0;
      this.$nextTick(() => {
        const audio = this.$refs.audio;
        if (audio) {
          audio.play();
        }
      });
    },
    isPlayed(playing) {
      // 等待音频加载成功完成后播放
      if (!this.initAudioReady) {
        return;
      }
      this.$nextTick(() => {
        const audio = this.$refs.audio;
        if (audio) {
          // this.isplayIcon=playing;
          playing ? audio.play() : audio.pause();
        }
      });
    },
  },
  methods: {
    ...mapMutations(["setPlayList", "setIsPlayed", "setPlayIndex"]),
    setVolume(params){
      this.$refs.audio.volume=params.val
    },
    setProgressAudio(params) {
      this.initAudioReady = false;
      this.currentTime = (params.val / 100) * this.totalTime;
      this.$refs.audio.currentTime = (params.val / 100) * this.totalTime;
      // console.log(this.currentTime);
    },

    canplaySong(e) {
      this.initAudioReady = true;
      // this.setIsPlayed(true)
      // console.log("这是canplaySong");
    },
    playSong(e) {
      this.initAudioReady = true;
      this.totalTime = e.target.duration;
      this.setIsPlayed(true);
      // console.log("这是playSong");
      // console.log(this.curList)
    },
    endedSong() {
      this.changeSong("next");
    },
    updateSongTime(e) {
      // console.log("这是 updateSongTime");
      if (!this.initAudioReady) {
        return;
      }
      this.currentTime = e.target.currentTime;
    },
    loopSong() {
      this.$refs.audio.currentTime = 0;
      this.$refs.audio.play();
      this.setIsPlayed(true);
    },
    audioHandler(type) {
      if (type === "play") {
        this.setIsPlayed(!this.isPlayed);
        this.setPlayIndex(this.playIndex);
      } else {
        this.changeSong(type);
      }
    },
    changeSong(type) {
      let index = this.playIndex;
      if (this.playList.length > 1) {
        //如果歌单只有一首歌曲则循环播放
        if (type === "prev") {
          index = index < 1 ? this.playList.length - 1 : --index;
        }
        if (type === "next") {
          index = index >= this.playList.length - 1 ? 0 : ++index;
        }
        this.initAudioReady = false;
        this.setIsPlayed(false);
        this.setPlayIndex(index);
      } else {
        this.loopSong();
        // console.log("这是changeSong");
      }
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.song-li{
  position: absolute;
  top: -410px;
  left: -420px;
  width: 600px;
  height: 400px;
  padding: 16px;
  padding-top: 0;
  font-size: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 5px 40px -1px rgba(2, 10, 18, 0.1);
  overflow-y: auto;
  z-index: 99;
 .song-list{
    min-width: 400px;
    font-size: 14px;
  }
}
.songplay{
  position: relative;
  cursor: pointer;
}
.progress-ado{
  position: absolute;
  top: -2px;
}
.progressline {
  position: absolute;
  top: -4px;
  z-index: 9;
}
.playbar {
  width: 100%;
  height: 70px;
  box-shadow: 0 5px 40px -1px rgba(2, 10, 18, 0.1);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 5;
  background-color: #fff;
  .w1200 {
    width: 1200px;
    margin: 0 auto;
    // padding-top: 10px;
    .playbar-inside {
      width: 100%;
      height: 70px;
      // border: 1px solid red;
      .el-col {
        // border: 1px solid blue;
        height: 70px;
      }
      .bar-img {
        width: 100%;
        height: 100%;
        cursor: pointer;
        // border: 1px solid yellow;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .img-left {
          display: flex;
          font-size: 12px;
          .el-image {
            border-radius: 4px;
          }
          .img-name {
            padding-left: 10px;
            font-weight: 600;
          }
          .img-artist {
            color: #ccc;
            padding-top: 15px;
            font-weight: 500;
          }
        }
        .img-right {
          color: #606266;
        }
      }
      .bar-control {
        width: 100%;
        height: 100%;
        // border: 1px solid #ccc;
        display: flex;
        font-size: 23px;
        color: #606266;
        justify-content: center;
        align-items: center;
        i {
          cursor: pointer;
        }
        .center {
          font-size: 40px;
          padding: 0 40px 0 40px;
          i {
            color: #ff641e;
          }
        }
      }
      .song-ci-show{
        color: #ff641e;
      }
      .song-ci{
        position: relative;
        cursor: pointer;
      }
      .ci::before{
        content: '歌词';
        position: absolute;
        top: 0;
        left: 8px;
        font-size: 17px;
        color: #333;
      }
      .ci{
        position: absolute;
        top: -473px;
        left: -140px;
        z-index:50;
        border-radius: 4px;
        max-width: 380px;
        min-height: 468px;
        cursor: pointer;
        background-color: #fff;
        padding: 18px;
        padding-top: 40px;
       box-shadow: 0 5px 40px -1px rgba(2, 10, 18, 0.1);
      }
      .bar-list {
        display: flex;
        // padding-top: 25px;
        line-height: 70px;
        justify-content: space-between;
        align-items: center;
        .blist-left {
          display: flex;
          align-items: center;
          padding-top: 8px;
          justify-content: space-around;
          font-size: 23px;
          color: #ccc;
          width: 237px;
          .line {
            width: 180px;
            border-radius: 4px;
            position: relative;
          }
        }
        .blist-right {
          display: flex;
          width: 120px;
          justify-content: space-between;
          align-items: center;
          font-size: 23px;
          color: #ccc;
          span {
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>
